<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/resources/knit/css/knit.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="/resources/knit/js/html5shiv.js"></script>
    <script src="/resources/knit/js/respond.min.js"></script>
  <![endif]-->

  <script src="/resources/knit/js/jquery.js"></script>
</head>
<body>
	<div class="panel panel-primary" style="width: 400px; height: 500px;margin:0">
			<button class="close" type="button" onclick="closeView();" style="margin-top:6px; margin-right: 5px; color:#ffffff; opacity:1; ">×</button>
		<div class="panel-heading">
			<h3 class="panel-title">DBPM info.</h3>
		</div>
		<div class="panel-body">
			<ul class="nav nav-pills">
				<c:if test="${not empty connectionInfo[0] }">
				<li id="li0" <c:if test="${phase eq 'dev'}">class="active"</c:if>><a href="javascript:open(0);">dev</a></li>
				</c:if>
				<c:if test="${not empty connectionInfo[1] }">
				<li id="li1" <c:if test="${phase eq 'alpha'}">class="active"</c:if>><a href="javascript:open(1);">alpha</a></li>
				</c:if>
				<c:if test="${not empty connectionInfo[2] }">
				<li id="li2"><a href="javascript:open(2);">real</a></li>
				</c:if>
			</ul>
			<c:forEach var="info" items="${connectionInfo }" varStatus="v">
			<c:if test="${not empty info }">
			<table class="table table-bordered" style="display:none" id="dbpm${v.index }">
				<colgroup>
					<col style="width: 80px;">
					<col>
				</colgroup>
				<tbody>
					<tr>
						<th>DB</th>
						<td>${info.name}</td>
					</tr>
					<tr>
						<th>Driver</th>
						<td>${info.dbType }</td>
					</tr>
					<tr>
						<th>URL</th>
						<td>${info.url }</td>
					</tr>
					<tr>
						<th>User</th>
						<td>${info.user }</td>
					</tr>
					<tr>
						<th>Password</th>
						<td>${info.passwd }</td>
					</tr>
					<tr>
						<th>Encoding</th>
						<td>${info.rawEncoding }</td>
					</tr>
				</tbody>
			</table>
			</c:if>
			</c:forEach>
		</div>
	</div>
<script>
	var phase = '${phase }';
	if(phase == 'dev'){
		$('#dbpm0').show();
	}else{
		$('#dbpm1').show();
	}	
	function open(id){
		$('li').removeClass('active');
		$('#li' + id).addClass('active');
		$('table').hide();
		$('#dbpm' + id).show();
	}
	function closeView(){
		alert('closedbpm');
	}

</script>
</body>
</html>
